<template>
  <el-form
    :inline="false"
    label-width="120px"
  >
    <el-form-item
      v-for="item of dynFormItems"
      :key="item.id"
      :label="item.itemName">
      <component
        :is="currentComponent(item.dataType)"
        v-model="item.itemValue"
        :form-item="item"
        @changeValied="changeValied"
      />
      <span>{{ item.remark }}</span>
      <el-alert
        v-show="item.result === 0 && item.judgeReason"
        :title="item.itemName + '结果验证失败'"
        type="error"
        class="alertTip"/>
    </el-form-item>
  </el-form>
</template>

<script>
import valiInput from './components/valiInput.vue'
import valiSwitch from './components/valiSwitch.vue'
import valiSelect from './components/valiSelect.vue'
import valiRadio from './components/valiRadio.vue'
import valiCheckBox from './components/valiCheckBox.vue'
import valiUpload from './components/valiUpload.vue'
import valiInputNumber from './components/valiInputNumber.vue'
import { getFormResult } from '@/api/Tooling/toolingChecklist'
export default {
  name: 'DynGenerateForm',
  components: { valiInput, valiSwitch, valiSelect, valiRadio,
    valiCheckBox, valiUpload, valiInputNumber },
  props: {
    dynFormItems: {
      type: [Array],
      default: () => ([])
    },
    propItemName: {
      type: String,
      default: 'id'
    }
  },
  data() {
    return {
      rules: {
        itemValue: [
          { required: true, message: '请选择活动资源', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    currentComponent(type) {
      const formType = ['', 'valiInputNumber', 'valiInput', 'valiSwitch',
        'valiSelect', 'valiSelect', 'valiRadio', 'valiCheckBox', 'valiInput',
        'valiUpload'
      ]
      return formType[type]
    },
    async changeValied(item) {
      if (!item.isCheck) {
        const res = await getFormResult({
          // 后端字段无法统一
          itemId: item[this.propItemName],
          itemValue: item.itemValue
        })
        item.result = res.data.result
        item.judgeReason = res.data.judgeReason
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.alertTip{
  height: 40px;
  margin-top: 10px;
}
</style>
